import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {Button} from '@ant-design/react-native';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {setUserInfo} from '../redux/actions/userInfo';

class PageTabTwo extends Component {
  static navigationOptions = {
    title: 'Tab第二个页面',
  };

  changeReduxStore = () => {
    const {actions} = this.props;
    // 设置 redux store，相当于 dispatch，这里触发 actions 中的 'SET_USER_INFO'
    actions.setUserInfo();
  };

  render() {
    const {userInfo} = this.props;
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text style={{fontSize: 20, color: 'red'}}>Tab第二个页面</Text>
        <Text style={{fontSize: 20, color: 'red'}}>
          我的名字: {userInfo.name}
        </Text>
        <Text style={{fontSize: 20, color: 'red'}}>
          我的性别: {userInfo.gender}
        </Text>
        <Button onPress={this.changeReduxStore}>改变redux</Button>
      </View>
    );
  }
}

const mapStateToProps = state => ({
  userInfo: state.device.userInfo,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {
      setUserInfo,
    },
    dispatch,
  ),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(PageTabTwo);
